<template>
  <div ref="chart" style="height: 300px"></div>
</template>

<script>
import * as echarts from 'echarts';
const seriesList = ['成交金额', '信任标签占比'];
const colorsList = ['#2391FF', '#724EFF'];

export default {
  name: 'ChartStatistic',
  data() {
    return {
      xaxis: [],
      yaxisDayVolume: [],
      yaxisTrust23Pct: [],
    };
  },
  created() {},
  mounted() {
    // this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        color: colorsList,
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let res = `<div>${params[0].name}</div>`;
            params.forEach(function (item) {
              if (item.seriesName === seriesList[0]) {
                res += `<div>${item.marker} ${item.seriesName}: ${item.value} 万元</div>`;
              }
              if (item.seriesName === seriesList[1]) {
                res += `<div>${item.marker} ${item.seriesName}: ${item.value} %</div>`;
              }
            });
            return res;
          },
        },
        legend: {
          top: '5px',
          right: '0px',
          data: seriesList,
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: this.xaxis,
        },
        yAxis: [
          {
            type: 'value',
            name: '成交金额 (万元)',
            min: 'dataMin',
            max: 'dataMax',
            silent: true,
            position: 'left',
            nameTextStyle: {
              align: 'left',
            },
            axisLabel: {
              formatter: '{value}',
            },
          },
          {
            type: 'value',
            name: '信任标签占比',
            position: 'right',
            axisLabel: {
              formatter: '{value} %',
            },
          },
        ],
        series: [
          {
            name: '成交金额',
            type: 'line',
            smooth: true,
            yAxisIndex: 0,
            data: this.yaxisDayVolume,
          },
          {
            name: '信任标签占比',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: this.yaxisTrust23Pct,
          },
        ],
      };

      chart.setOption(option);
    },
    flushChart(a, b, c) {
      if (!a || !b || !c) {
        return;
      }
      this.xaxis.splice(0, this.xaxis.length);
      this.yaxisDayVolume.splice(0, this.yaxisDayVolume.length);
      this.yaxisTrust23Pct.splice(0, this.yaxisTrust23Pct.length);
      this.xaxis.push(...a);
      this.yaxisDayVolume.push(...b);
      this.yaxisTrust23Pct.push(...c);
      const chart = echarts.getInstanceByDom(this.$refs.chart);
      if (chart) {
        chart.dispose();
      }
      this.initChart();
    },
  },
};
</script>
